*,
*:before,
*:after,
*::before,
*::after{
    box-sizing: border-box;
}
@font-face {
    font-family: 'numDin';
    src: url("./fonts/DIN-Regular.otf") format("truetype");
}
@font-face {
    font-family: 'numDigital';
    src: url("./fonts/digifaw.ttf") format("truetype");
}
@font-face {
    font-family: 'numFB';
    src: url("./fonts/AgencyFB.ttf") format("truetype");
}
.font-din{
    font-family: 'numDin';
}
.font-digital{
    font-family: 'numDigital';
}
.font-fb{
    font-family: 'numFB';
}
html,body{
    width: 100%;
    height: 100%;
}
body{
    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.2;
    color: #fff;
}
ul{
    list-style: none;
    padding: 0;
    margin: 0;
}
a{
    text-decoration: none;
}
em,
i{
    font-style: normal;
}
figure{
    margin: 0;
}
.clearfix{
    &::before, &::after{
        content: "";
        display: block;
        clear: both;
    }
}
.text-gradient{
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    background-image: linear-gradient(0deg, #3d5a8b, #fff);
}
.flex-list{
    @flexGutter: 32px;
    display: flex;
    width: 100%;
    height: 100%;
    &>li{
        flex: 1;
        &.custom-flex{
            flex: none;
        }
    }
    &.hori-list{
        flex-direction: row;
        &>li{
            &+li{
                margin-left: @flexGutter;
            }
            &.one-third{
                width: calc((100% - @flexGutter * 2) / 3);
            }
            &.one-fourth{
                width: calc((100% - @flexGutter * 3) / 4);
            }
        }
    }
    &.vert-list{
        flex-direction: column;
        &>li{
            &+li{
                margin-top: @flexGutter;
            }
            &.one-third{
                height: calc((100% - @flexGutter * 2) / 3);
            }
            &.one-fourth{
                height: calc((100% - @flexGutter * 3) / 4);
            }
        }
    }
}
@pageGutter: 32px;
#app{
    position: absolute;
    left: 0;
    top: 0;
    width: 7680px;
    height: 1440px;
    padding: 93px @pageGutter @pageGutter;
    font-size: 14px;
    transform-origin: left top;
    overflow: hidden;
    background: #031222;
    &.bg-01{
        //background: url("./images/bg/bg-01.jpg") #040823 no-repeat center top;
    }
    &.bg-02{
        background: url("./images/bg/bg-02.png") no-repeat center top;
    }
}
#header{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 120px;
    &.header-01{
        height: 88px;
        //background: url("./images/header/header-01.png") no-repeat center top;
        .header-title{
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 88px;
            padding-left: 4px;
            line-height: 88px;
            text-align: center;
            font-size: 32px;
            letter-spacing: 4px;
            font-weight: bolder;
            text-shadow: 0 0 20px rgba(0, 155, 255, .9);
        }
    }
    &.header-02{
        height: 88px;
        background: url("./images/header/header-02.png") no-repeat center top;
        .header-title{
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 88px;
            padding-left: 4px;
            line-height: 88px;
            text-align: center;
            font-size: 32px;
            letter-spacing: 4px;
            font-weight: bolder;
            // text-shadow: 0 0 20px rgba(0, 155, 255, .9);
            span{
                .text-gradient;
                background-image: linear-gradient(0deg, #3d5a8b, #fff);
            }

        }
        .header-datetime{
            top: -15px;
            color: rgba(255, 255, 255, 0.6);
            font-size: 14px;
        }
    }
    .header-datetime{
        position: absolute;
        top: 0;
        bottom: 0;
        height: 20px;
        margin-top: auto;
        margin-bottom: auto;
        line-height: 20px;
        font-size: 18px;
        color: #fff;
        em + em{
            margin-left: 8px;
        }
    }
    .header-nav{
        position: absolute;
        top: 0;
        bottom: 0;
        height: 32px;
        margin-top: auto;
        margin-bottom: auto;
        line-height: 32px;
    }
    .header-nav-01{
        &>ul{
            &>li{
                position: relative;
                float: left;
                padding: 0 16px;
                font-size: 16px;
                &+li{
                    margin-left: 32px;
                }
                a{
                    color: #fff;
                }
                @title_color: #0495ee;
                &.active{
                    margin: 0 64px;
                    &:before,
                    &:after{
                        content: '';
                        position: absolute;
                        display: block;
                        width: 10px;
                        height: 10px;
                        top: 50%;
                        margin-top: -5px;
                        border: 2px solid @title_color;
                        border-radius: 50%;
                    }
                    &:before{
                        right: 100%;
                    }
                    &:after{
                        left: 100%;
                    }
                    a{
                        &:before,
                        &:after{
                            content: '';
                            position: absolute;
                            display: block;
                            width: 60px;
                            height: 1px;
                            top: 50%;
                            margin-top: -0.5px;
                        }
                        &:before{
                            right: 100%;
                            margin-right: 10px;
                            background-image: linear-gradient(to left, @title_color 0%, transparent 100%);
                        }
                        &:after{
                            left: 100%;
                            margin-left: 10px;
                            background-image: linear-gradient(to right, @title_color 0%, transparent 100%);
                        }
                    }
                }
            }
        }
    }
    .pull-left{
        left: @pageGutter;
        right: auto;
    }
    .pull-right{
        left: auto;
        right: @pageGutter;
    }
    .btn-return{
        position: absolute;
        top: 25px;
        color: rgba(255, 255, 255, 0.6);
    }
}
#main{
    position: relative;
    width: 100%;
    height: 100%;
}
.panel{
    position: relative;
    width: 100%;
    height: 100%;
}
.chart{
    width: 100%;
    height: 100%;
}
.ellipsis {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.u-list {
    text-align: center;
    &.stripe {
        .list-item{
            &:nth-child(even) {
                background: rgba(78, 186, 255, 0.16);
            }
        }
    }
    .num{
        font-size: 16px;
        text-shadow: 0 0 8px rgba(42, 163, 232, 0.6);
    }

    .list-header {
      display: flex;
      border-top: 1px solid rgba(0, 123, 234, 1);
      border-bottom: 1px solid rgba(0, 123, 234, 1);
      background: rgba(0, 123, 234, 0.15);
      box-shadow: 0 0 12px 0 rgba(21, 31, 192, 0.35) inset;
      color: #f5cf41;
      li{
        flex: 1;
        padding: 11px 1px;
        word-break: break-all;
      }
    }
    .list-body {
      >ul{
        width: 100%;
      }
      .list-item {
        color: #fff;
        & + .list-item{
            border-top: 1px solid rgba(0, 123, 234, 0.3);
        }
        ul {
          display: flex;
          li {
            flex: 1;
            padding: 12px 2px;
            .ellipsis;
          }
        }
      }
    }
}

.u-list-2 {
    text-align: center;
    &.stripe {
        .list-item{
            &:nth-child(even) {
                background: rgba(78, 186, 255, 0.16);
            }
        }
    }
    .num{
        // font-size: 16px;
        text-shadow: 0 0 8px rgba(42, 163, 232, 0.6);
    }

    .list-header {
      display: flex;
      border-bottom: 2px solid rgba(67, 154, 255, 0.21);
      color: #2175ff;
      li{
        flex: 1;
        padding: 11px 1px;
        word-break: break-all;
      }
    }
    .list-body {
      >ul{
        width: 100%;
      }
      .list-item {
        color: #fff;
        & + .list-item{
            border-top: 1px dashed rgba(67, 154, 255, 0.21);
        }
        ul {
          display: flex;
          li {
            flex: 1;
            padding: 12px 2px;
            .ellipsis;
          }
        }
      }
    }
}
.panel-01{
    padding-top: 12px;
    background-image: linear-gradient(to bottom, transparent 0%, rgba(12, 55, 191, .2) 100%);
    border: 1px solid #1053b3;
    border-top: none;
    &.no-header-panel{
        border-top: 1px solid #1053b3;
        padding-top: 0;
    }
    .panel-header{
        position: absolute;
        left: 0;
        top: -10px;
        width: 100%;
        height: 20px;
        line-height: 20px;
        font-size: 18px;
        letter-spacing: 2px;
        text-align: center;
        overflow: hidden;
        .panel-header-title{
            position: relative;
            display: inline-block;
            padding: 0 6px 0 18px;
            font-weight: bold;
            text-shadow: 2px 2px 10px rgba(40, 111, 255, 0.6);
            &:before,
            &:after{
                content: '';
                position: absolute;
                display: block;
                top: 50%;
                width: 10000px;
                height: 1px;
            }
            &:before{
                right: 100%;
                background-image: linear-gradient(to left, transparent 0%, #1053b3 0.2%);
            }
            &:after{
                left: 100%;
                background-image: linear-gradient(to right, transparent 0%, #1053b3 0.2%);
            }
            span{
                &:before{
                    content: '';
                    position: absolute;
                    left: 6px;
                    top: 0;
                    width: 3px;
                    height: 100%;
                    background-image: linear-gradient(to bottom, #00a8ff 0%, #1e79ff 100%);
                }
            }
        }
    }
    .panel-body{
        position: relative;
        width: 100%;
        height: 100%;
        padding: 15px 10px;
    }
}
.panel-02{
    padding-top: 55px;
    &.no-header-panel{
        padding-top: 0;
    }
    .panel-header{
        position: absolute;
        left: 0;
        top: 0px;
        width: 100%;
        height: 45px;
        background: linear-gradient(90deg, rgba(5, 25, 62, 0.5), rgba(5, 25, 62, 0));
        &:before,
        &:after{
            content: '';
            position: absolute;
            left: 0;
            display: block;
            width: 3px;
            height: 3px;
            background: #106aff;
        }
        &:before{
            top: 0;
        }
        &:after{
            bottom: 0;
        }
        .panel-header-title{
            position: relative;
            display: inline-block;
            padding: 0 6px 0 18px;
            font-size: 18px;
            font-weight: bold;
            line-height: 45px;
            letter-spacing: 2px;
            text-shadow: 2px 2px 10px rgba(40, 111, 255, 0.6);
        }
    }
    .panel-body{
        position: relative;
        width: 100%;
        height: 100%;
        border: 1px solid rgba(16, 106, 255, 0.05);
        background: rgba(5, 25, 62, 0.3);
        &:before,
        &:after{
            content: '';
            position: absolute;
            left: -1px;
            display: block;
            width: 3px;
            height: 3px;
            background: #106aff;
        }
        &:before{
            top: -1px;
        }
        &:after{
            bottom: -1px;
        }
    }
    .panel-content{
        width: 100%;
        height: 100%;
        padding: 15px 20px;
        &:before,
        &:after{
            content: '';
            position: absolute;
            right: -1px;
            display: block;
            width: 3px;
            height: 3px;
            background: #106aff;
        }
        &:before{
            top: -1px;
        }
        &:after{
            bottom: -1px;
        }
    }
}
.sub-panel-01{
    padding-top: 20px;
    .sub-panel-header{
        position: absolute;
        left: 0;
        top: 0px;
        width: 100%;
        height: 20px;
        overflow: hidden;
        .sub-panel-header-title{
            font-size: 16px;
            font-weight: bold;
            letter-spacing: 1px;
            &:before{
                content: '';
                display: inline-block;
                margin-right: 10px;
                width: 12px;
                height: 3px;
                background-image: linear-gradient(90deg, #00a8ff 0%, #1e79ff 100%);
                vertical-align: middle;
            }
        }
    }
    .sub-panel-body{
        position: relative;
        width: 100%;
        height: 100%;
    }
}
.statistics-01{
    text-align: center;
    &>li{
        position: relative;
        display: inline-block;
        min-width: 235px;
        height: 118px;
        padding: 0 16px;
        margin: 0 16px;
        text-align: center;
        background-image: linear-gradient(to bottom, transparent 0%, rgba(12, 55, 191, .4) 100%);
        border: 1px solid #0949a9;
        &:before,
        &:after,
        .item-name:before,
        .item-name:after{
            content: '';
            position: absolute;
            display: block;
            width: 12px;
            height: 12px;
            border: 2px solid #0096ff;
        }
        &:before{
            left: -1px;
            bottom:-1px;
            border-top: none;
            border-right: none;
        }
        &:after{
            right: -1px;
            bottom: -1px;
            border-top: none;
            border-left: none;
        }
        .item-name:before{
            left: -1px;
            top: -1px;
            border-bottom: none;
            border-right: none;
        }
        .item-name:after{
            right: -1px;
            top: -1px;
            border-bottom: none;
            border-left: none;
        }
    }
    .item-name{
        height: 48px;
        line-height: 47px;
        font-size: 18px;
        border-bottom: 1px solid #092a61;
    }
    .item-num{
        height: 64px;
        font-size: 20px;
        &>ul{
            display: flex;
            width: 100%;
            height: 100%;
            &>li{
                position: relative;
                flex: 1;
                display: flex;
                padding: 0 24px;
                align-items: center;
                justify-content: center;
                &+li{
                    &:before{
                        content: '';
                        position: absolute;
                        left: -1px;
                        top: 0;
                        bottom: 0;
                        display: block;
                        width: 2px;
                        height: 40px;
                        margin: auto 0;
                        background-color: #1d3781;
                    }
                }
            }
        }
        em{
            display: inline-block;
            margin: 0 4px;
            letter-spacing: 2px;
        }
        .font-digital{
            font-size: 36px;
            color: #ffdb1a;
            -webkit-box-reflect: below -8px linear-gradient(0deg, #000, transparent 50%);
        }
        .font-din{
            font-size: 32px;
            font-weight: bolder;
            text-shadow: 2px 2px 10px rgba(40, 111, 255, 0.6);
        }
        .unit{
            margin-left: 4px;
            font-size: 16px;
            color: #797c99;
        }
        .percent{
            text-shadow: 2px 2px 10px rgba(40, 111, 255, 0.6);
        }
    }
}
.statistics-02{
    .clearfix;
    padding: 20px 10px;
    border: 1px dashed rgba(0, 150, 255, 0.8);
    >li{
        float: left;
        min-width: 50%;
        text-align: center;
        .ellipsis;
    }
    .item-name{
        margin-right: 10px;
        vertical-align: middle;
        text-shadow: 0 0 8px rgba(42, 163, 232, 0.6);
    }
    .item-num{
        vertical-align: middle;
        font-size: 24px;
        font-weight: bold;
        text-shadow: 0 0 10px rgba(42, 163, 232, 0.44);
    }
}
.statistics-03{
    display: flex;
    text-align: center;
    &>li{
        flex: 1;
        position: relative;
        display: inline-block;
        padding: 0 16px;
        text-align: center;
        background-image: linear-gradient(to bottom, transparent 0%, rgba(12, 55, 191, .4) 100%);
        border: 1px solid #0949a9;
        &:before,
        &:after{
            content: '';
            position: absolute;
            display: block;
            width: 12px;
            height: 12px;
            border: 2px solid #0096ff;
        }
        &:before{
            left: -1px;
            bottom:-1px;
            border-top: none;
            border-right: none;
        }
        &:after{
            right: -1px;
            bottom: -1px;
            border-top: none;
            border-left: none;
        }
        & + li {
            margin-left: 20px;
        }
    }
    .statistic-item{
        display: flex;
        &:before,
        &:after{
            content: '';
            position: absolute;
            display: block;
            width: 12px;
            height: 12px;
            border: 2px solid #0096ff;
        }
        &:before{
            left: -1px;
            top: -1px;
            border-bottom: none;
            border-right: none;
        }
        &:after{
            right: -1px;
            top: -1px;
            border-bottom: none;
            border-left: none;
        }
        >div{
            flex: 1;
        }
    }
    .item-minor{
        .item-num{
            font-size: 30px;
            text-shadow: 0px 0px 8px rgba(42, 163, 232, 0.8);
        }
    }
    .item-major{
        .item-num{
            padding: 10px 0 0 0;
            color: #f3cd65;
            font-size: 36px;
            text-shadow: 0px 0px 8px rgba(255, 219, 26, 0.8);
            &:after{
                content: "";
                position: absolute;
                left: 0;
                right: 0;
                bottom: -2px;
                margin: auto;
                width: 50px;
                padding-top: 20px;
                border-bottom: 2px solid #0096ff;
            }
            span{
                display: block;
                -webkit-box-reflect: below -13px linear-gradient(0deg, rgba(0, 0, 0, 0.5), transparent 50%);
            }
        }
    }
    .item-name{
        height: 48px;
        line-height: 47px;
        font-size: 18px;
        border-bottom: 1px solid #092a61;
    }
    .item-num{
        padding: 15px 0;
    }
}
.statistics-04{
    display: flex;
    justify-content: space-around;
    >li{
        text-align: center;
    }
    .item-name{
        padding: 15px 0;
    }
    .item-num{
        .text-gradient;
        background-image: linear-gradient(0deg, #0463ff, #b8d3ff);
        font-size: 36px;
    }
}
.wave-circle-01{
    text-align: center;
    &>ul{
        &>li{
            display: inline-block;
            margin: 16px;
        }
    }
    .item-name{
        margin-bottom: 12px;
        font-size: 16px;
    }
    .item-main{
        position: relative;
        width: 136px;
        height: 129px;
        margin: 0 auto;
    }
    .item-wave{
        position: absolute;
        left: 6px;
        right: 6px;
        top: 6px;
        bottom: 6px;
        border-radius: 50%;
        overflow: hidden;
        animation: water-wave linear infinite;
        &:before{
            content: '';
            display: block;
            position: absolute;
            top: 45%;
            left: -25%;
            opacity: .7;
            width: 200%;
            height: 200%;
            border-radius: 40%;
            animation: inherit;
            animation-duration: 5s;
            background-image: radial-gradient(#1c5479, #1fc1d2);
        }
        &:after{
            content: '';
            display: block;
            position: absolute;
            top: 45%;
            left: -35%;
            opacity: .5;
            width: 200%;
            height: 200%;
            border-radius: 35%;
            animation: inherit;
            animation-duration: 7s;
            background-image: radial-gradient(#1c5479, #1fc1d2);
        }
    }
    .item-num {
        position: relative;
        width: 100%;
        height: 100%;
        line-height: 129px;
        background: url("./images/wave-circle/circle-bg-01.png") no-repeat;
        font-size: 32px;
        font-weight: bold;
        color: #ffdd9c;
        text-shadow: 0 3px 2px rgba(0, 6, 16, 0.72);
    }
    @keyframes  water-wave{
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }
}
